<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-container">
			<view class="search">
				<view class="search-icon">
					<image src='../../../static/ss.png' class="img" type="search" @tap="search"></image>
				</view>
				<input class="search-input" type="text" placeholder="请输入关键字" v-model="keyword" @input="onInputChange" />
				<view class="search-icon">
					<image src='../../../static/guaunbi.png' class="img" v-if="keyword" type="clear" @tap="onClear">
					</image>
				</view>
			</view>
		</view>
		<!--中间的内容-->
		<!-- 左边选项卡 -->
		<view class="container">
			<view class="sidebar">
				<view v-for="(option, index) in options" :key="index" class="sidebar-option"
					:class="currentTab === index ? color[index] : ''" @click="changeTab(index)">
					<!-- :class="currentTab === index ? 'active' : ''" -->
					{{ option }}
				</view>
			</view>
			<!-- 右边内容 -->
			<view class="content">
				<view class="content1" :class="color[currentTab]" v-show="showRight">
					<image :src="selectedOption.image" class="image" />
					<view class="description">
						<text>{{ selectedOption.description }}</text><br>
						<text>{{ selectedOption.text }}</text>
					</view>
				</view>
				<view class="card-container">
					<view v-for="(card, index) in selectedOption.cards" :key="index" class="card">
						<text>{{ card.title }}</text>
						<view class="card-right" :style="{ backgroundColor: card.color }">
							<text>{{ card.subtitle }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tabbar">
			<view class="tab" v-for="(item,index) in tabbarList" :key='index' @tap='navigateTo(item.pagePath)'>
				<image v-if='item.pagePath===cureentPage' :src="item.selectedIconPath" mode=""></image>
				<image v-else :src="item.iconPath" mode=""></image>
				<view class="text">{{item.text}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			cureentPage: {
				type: String,
				default: 'guide'
			}
		},
		data() {
			return {
				keyword: '', //搜索框
				options: ['可回收物', '有害垃圾', '厨余垃圾', '其它垃圾'], //四种垃圾类型
				color: ["colorone", "colortwo", "colorthree", "colorfour"], //四种颜色
				currentTab: 0, //点击左边选项的哪几个
				selectedOption: { //右边内容的各种
					image: '',
					description: '',
					text: '',
					bgcolor: '',
					cards: [] //右边内容卡片
				},
				showRight: true, //控制搜索时的右边上面的介绍组件
				listData: [], //请求到的所有数据
				tabbarList: [{
						"iconPath": "/static/syw.png",
						"selectedIconPath": "/static/syd.png",
						"pagePath": "index",
						"text": "首页"
					},
					{
						"iconPath": "/static/fxw.png",
						"selectedIconPath": "/static/fxd.png",
						"pagePath": "finding",
						"text": "发现"
					},
					{
						"iconPath": "/static/sbw.png",
						"selectedIconPath": "/static/sbd.png",
						"pagePath": "guide",
						"text": "识别"
					},
					{
						"iconPath": "/static/scw.png",
						"selectedIconPath": "/static/scd.png",
						"pagePath": "shopping",
						"text": "商城"
					},
				
					{
						"iconPath": "/static/grw.png",
						"selectedIconPath": "/static/grd.png",
						"pagePath": "my",
						"text": "个人"
					}
				]
			};
		},
		mounted() {

		},
		onLoad() {
			uni.request({
				url: 'http://43.136.172.73/api/v1/rubbish/list',
				method: 'GET',
				header: {
					'Authorization': ''
				},
				success: (res) => {
					console.log(res);
					this.listData = res.data;
					this.updateSelectedOption(0);
				},
				fail: (err) => {
					console.error(err);
				},
			});
		},
		methods: {
			onInputChange() {
				// 输入框内容变化时的逻辑
			},
			onClear() {
				// 清空搜索框的逻辑
				this.keyword = '';
			},
			changeTab(index) {
				this.currentTab = index;
				this.updateSelectedOption(index);
				this.showRight = true;

			},
			search() {
				// 执行搜索逻辑，通过 filter() 方法过滤数据
				this.showRight = false;
				uni.request({
					url: 'http://43.136.172.73/api/v1/rubbish/selectByValue/' + this.keyword,
					method: 'GET',
					header: {
						'Authorization': ''
					},
					success: (res) => {
						const arrData = res.data.data;
						// console.log(arrData);
						arrData.map(item =>
							item.type = item.type == "可回收垃圾"?"可回收物":item.type
						);
						console.log(arrData);
						const newData = arrData.map(item => ({
							title: item.name,
							subtitle: item.type,
							color: item.type == "可回收物" ? "#3586FC" : (item.type == "有害垃圾" ?
								"#FE0138" : (item.type == "厨余垃圾" ? "#9ED26E" : "#A4A8B4")),
						}));
						// console.log(newData);
						this.selectedOption.cards = []
						this.selectedOption.cards.push(...newData);
						// console.log(this.selectedOption);
					},
					fail: (err) => {
						console.error(err);
					},
				});
				// this.searchResult = this.selectedOption.cards.filter(card => card.title.includes(this.keyword))
			},
			updateSelectedOption(index) {

			  // console.log(index);
				const arrData = this.listData.filter(obj => obj.rubbishCategoryId === index+6)
				// console.log(arrData);
				const newData = arrData.map(item => ({
				  title: item.name,
				  subtitle:item.rubbishCategoryId == 6? "可回收物":(item.rubbishCategoryId == 7? "有害垃圾":(item.rubbishCategoryId == 8? "厨余垃圾":"其它垃圾")),
				  color:item.rubbishCategoryId == 6? "#58adfc":(item.rubbishCategoryId == 7? "#ff8089":(item.rubbishCategoryId == 8? "#9ED26E":"#A4A8B4")),
				}));
				// console.log(newData);

				switch (this.currentTab) {
					case 0:
						this.selectedOption = {
							image: '../../../static/011.png',
							description: '可回收物:',
							text: '是指废纸张，废塑料，废玻璃制品，废金属，废织物等适宜回收，可循环利用的生物废弃物。',
							bgcolor: '#3586FC',
							cards: [
								// { title: '卡片1', subtitle: '可回收物', color: '#3586FC' },
								// { title: '卡片2', subtitle: '可回收物', color: '#3586FC' }
							]
						};
						break;
					case 1:
						this.selectedOption = {
							image: '../../../static/022.png',
							description: '有害垃圾:',
							text: '是指废电池，废灯管，废药品，废油漆及其容器等对人体健康或者自然环境造成直接或者潜在危险的生活废弃物',
							bgcolor: '',
							cards: [
								// { title: '卡片3', subtitle: '有害垃圾', color: '#FE0138' },
								// { title: '卡片4', subtitle: '有害垃圾', color: '#FE0138' }
							]
						};
						break;
					case 2:
						this.selectedOption = {
							image: '../../../static/033.png',
							description: '厨余垃圾:',
							text: '是指食材废料，剩菜剩饭，过期饰品，瓜皮果壳，花卉绿植，中药药渣等易腐败的生活物质生活废弃物。',
							bgcolor: '',
							cards: [
								// { title: '卡片5', subtitle: '厨余垃圾', color: '#9ED26E' },
								// { title: '卡片6', subtitle: '厨余垃圾', color: '#9ED26E' }
							]
						};
						break;
					case 3:
						this.selectedOption = {
							image: '../../../static/044.png',
							description: '其他垃圾:',
							text: '即指除可回收物，有害垃圾，湿垃圾以外的其他生活废弃物',
							bgcolor: '',
							cards: [
								// { title: '卡片7', subtitle: '其他垃圾', color: '#A4A8B4' },
								// { title: '卡片8', subtitle: '其他垃圾', color: '#A4A8B4' }
							]
						};
						break;
					default:
						break;
				};
				this.selectedOption.cards.push(...newData);
				// console.log(this.selectedOption);
			},
			navigateTo(e) {
				if(e == 'guide'){
					uni.redirectTo({
						url: `../../../pages/guide/sort/sort`,
						//animationType:"fade-in",
						animationDuration: 0,
					})
				}else{
						uni.redirectTo({
						url: `../../../pages/${e}/${e}`,
						//animationType:"fade-in",
			
						animationDuration: 0,
					})
				}
				
			
			}
		}
	}
</script>

<style lang="scss">
	.search-container {
		display: flex;
		align-items: center;
		padding: 10px;
		width: 100%;
		height: 100rpx;
		background-color: #f5f5f5;
		position: fixed;
		z-index: 9999;

		.search {
			display: flex;
			width: 670rpx;
			line-height: 30px;
			padding: 0 10px;
			margin: 0 15px;
			border: 1px solid #ccc;
			border-radius: 20px;
			background-color: #fff;

			.search-icon {
				width: 30rpx;
				height: 30rpx;
				margin-top: 5rpx;
				color: #ccc;

				.img {
					width: 30rpx;
					height: 30rpx;
				}
			}
			.search-input {
				flex: 1;
				height: 30px;
				width: 590rpx;
				line-height: 30px;
				padding: 0 10px;
				border-radius: 5px;
				// background-color: #fff;
			}


		}
	}


	.container {
		display: flex;
		height: 189vh;
		z-index: 9999;

		.sidebar {
			display: flex;
			position: fixed;
			border-right: 1px solid #C2C2C2;
			flex-direction: column;
			margin-top: 90rpx;
			height: 98vh;
			width: 210rpx;
			background-color: #F2F2F2;
			padding: 20rpx;
		}

		.sidebar-option {
			padding: 20rpx;
			padding-top: 30rpx;
			padding-bottom: 40rpx;
			font-size: 30rpx;
			// height:60rpx;
			cursor: pointer;
		}

		.sidebar-option .active {
			background-color: #CCCCCC;
		}

	}


	.content {
		flex-grow: 1;
		// padding: 20px;
		height: 1000px;
		margin-top: 102rpx;
		margin-left: 210rpx;
		// background-color: #5500ff;
		text-align: center;
		vertical-align: middle;

		.content1 {
			width: 100%;
			height: 50%;
			// background-color: #B7D3E9;

			.image {
				width: 380rpx;
				height: 600rpx;
				margin-top: 10px;
				margin-bottom: 10px;
			}

		}

		.description {
			padding-left: 20px;
			margin-bottom: 10px;
		}

		.card-container {
			display: flex;
			background-color: #f2f2f2;
			flex-direction: column;
			width: 100%;
		}

		.card {
			flex: 1;
			padding: 10px;
			color: #222;
			display: flex;
			border-bottom: 2px solid #aaa;
			justify-content: space-between;

			.card-right {
				color: white;
				padding: 3px;
				border-radius: 10px;
			}
		}


	}

	.colorone {
		background-color: #c8e6fd;
	}

	.colortwo {
		background-color: #ffcac6;
	}

	.colorthree {
		background-color: #D9D2CC;
	}

	.colorfour {
		background-color: #C2C2C2;
	}
	.tabbar {
	
		border-top: 2rpx solid #636263;
		background-color: #FFFFFF;
		z-index: 9999;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	
	
	}
	
	.tab {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	image {
		width: 40rpx;
		height: 40rpx;
	
	}
	
	.text {
		padding: 10rpx 0;
		font-size: 24rpx;
	}
</style>